<template>
	<div class="myadd">
		<div class="header">
			<div class="title">
				<span class="titleh">{{title}}</span>
				<span class="info">{{info}}</span>
			</div>
			<button type="button" v-if="showBtn" @click="edit">
	            <span v-if="!showx">编辑</span>
	            <span v-else>完成</span>
	          </button>
		</div>
		<div class="list">
			<mark1 v-for="(e,i) in list" :key="i" :markname="e.checkName" :showx="showx" @onClickmark="clickmark(i)" :hasplus="hasplus"></mark1>
		</div>
	</div>
</template>

<script>
	import mark1 from "./mark1";
	export default {
		name: "myadd",
		data() {
			return {
				currentL: '',
				currentT: '',
				toL: '',
				toT: '',
				pro: ''
			};
		},
		props: {
			anima: false,
			title: {
				type: String,
				default: "我的频道"
			},
			info: {
				type: String,
				default: "点击添加频道"
			},
			hasplus: {
				type: Boolean,
				default: false
			},
			showx: {
				type: Boolean,
				default: false
			},
			showBtn: {
				type: Boolean,
				default: false
			},
			list: {
				type: Array,
				default () {
					return [{
							checkName: "邀标",
							isSelected: false
						},
						{
							checkName: "询价",
							isSelected: false
						},
						{
							checkName: "竞谈",
							isSelected: false
						},
						{
							checkName: "单一",
							isSelected: false
						},
						{
							checkName: "竞价",
							isSelected: false
						},
						{
							checkName: "变更",
							isSelected: false
						},
						{
							checkName: "中标",
							isSelected: false
						},
						{
							checkName: "废标",
							isSelected: false
						}
					];
				}
			}
		},
		methods: {
			edit() {
				this.$emit('onEdit');
			},
			clickmark(e) {
				this.$emit('onClickmark', e);
				this.currentT = event.currentTarget.offsetTop;
				this.currentL = event.currentTarget.offsetLeft;
				console.log(this.currentL + ',' + this.currentT);
			}
		},
		components: {
			mark1
		},
		mounted() {}
	};
</script>

<style scoped lang="scss">
	@import "../../styles/common.scss";
	.myadd {
		padding: px2rem(30);
		padding-right: 0;
		.header {
			height: px2rem(80); // display: flex;
			// align-items: center;
			.title {
				font-size: px2rem(32);
				float: left;
				height: 100%;
			}
			.info {
				font-size: px2rem(23);
				height: 100%;
			}
			button {
				outline: 0;
				float: right;
				width: px2rem(90);
				height: px2rem(40);
				border: 1px solid red;
				color: red;
				border-radius: px2rem(20);
				background: transparent;
				margin-right: px2rem(30);
			}
			&:after {
				content: "";
				display: block;
				clear: both;
			}
		}
		.list {
			display: flex;
			flex-wrap: wrap;
		}
	}
</style>
